<template>
    <div class="step-nav">
      <div
        v-for="(step, idx) in steps"
        :key="step.title"
        :class="['step-item', { active: idx + 1 === currentStep, done: idx + 1 < currentStep }]"
        @click="onStepClick(idx + 1)"
      >
        <span class="step-index">
          <template v-if="idx + 1 < currentStep">✔</template>
          <template v-else>{{ idx + 1 }}</template>
        </span>
        <span class="step-title">{{ step.title }}</span>
        <span v-if="idx < steps.length - 1" class="step-line"></span>
      </div>
    </div>
  </template>
  
  <script setup>
  const props = defineProps({
    currentStep: Number,
    steps: Array
  })
  const emit = defineEmits(['stepClick'])
  function onStepClick(step) {
    emit('stepClick', step)
  }
  </script>
  
  <style scoped>
  .step-nav {
    display: flex;
    align-items: center;
    margin: 24px 0;
  }
  .step-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #aaa;
    font-weight: 500;
  }
  .step-item.active {
    color: #409eff;
  }
  .step-item.done {
    color: #67c23a;
  }
  .step-index {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 16px;
  }
  .step-item.active .step-index {
    border-color: #409eff;
  }
  .step-item.done .step-index {
    border-color: #67c23a;
    background: #67c23a;
    color: #fff;
  }
  .step-title {
    min-width: 80px;
  }
  .step-line {
    width: 40px;
    height: 2px;
    background: #eee;
    margin: 0 16px;
  }
  </style>